<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box{
            width: 500px;
            height: 500px;
            margin: 20px auto;
            border: 10px solid #000;
            position: relative;
            
        }
        .cover {
            width: 100px;
            height: 100px;
            background-color: #00f000;
            /* position: absolute; */
            cursor: move;
            /* display: none; */
            /* visibility: hidden; */
            /* opacity: 0; */
        }

        .box:hover {
            /* 脱离文档流？？？？ */
            /* margin-top: 40px;   占位置 */
            /* transform: translateY(20px);     不占位置 */
            border-color: green;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="cover"></div>
        3333
    </div>

    <h3>22222222222222222222222</h3>


    

    <script>


        // 死页面的性能是最好的
        // 页面的渲染必定伴随着页面的重绘和回流
        // 回流的代价更加昂贵
        // 回流必定也会引发重绘，但是重绘不一定引发回流
        //   尽量减少回流




        // 重绘和回流  --- 渲染页面
        //   重绘:   颜色的改变              color,background-color,transform会引发重绘
        //   回流：  占不占位置所引发的问题   display:none ,margin , font-size...会引发回流(插队--后面的元素都会后移或者前移)   


        // js频繁的DOM操作都会引发回流
        //    文档碎片


    </script>
</body>
</html>